<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/meta.jsp" %>
    <title>${site_title}</title>
</head>
<body>
<div class="zx-container" >
	<%@ include file="/trader/menu.jsp" %>
	<div class="span9 offset3">
		<%@ include file="/header_bg.jsp" %>
        <div class="row-fluid zx-bg-cont">
            <div class="span12 subpage-title">
                <div class="left"><h4 id="headertext" class="title">商品发布</h4></div>
                <div class="right">
	                <button id="btn_return" class="btn hide" onclick="history.back()"><i class="icon icon-share-alt"></i> 返回</button>
                    <button class="btn btn-primary" onclick="do_publish(this)"><i class="icon icon-share icon-white"></i> 保存</button>
                </div>
            </div>
            <div class="span12">
			    <form id="add_form" action="${ctx}/trader/trader.action.jsp?action=saveProduct" method="POST" enctype="multipart/form-data"  class="form-horizontal">
			    	<input type="hidden" id="ID" name="ID" value="${param.id}"/>
			    	<input type="hidden" id="TRADE_ID" name="TRADE_ID" value="${user.SRC_ID}"/>
            		<input type="hidden" id="DESCRIPTION" name="DESCRIPTION"/>
            		<input type="hidden" id="IMG" name="IMG"/>
			        <div class="control-group">
			            <label class="control-label">标题<span class="must-flag">*</span></label>
			            <div class="controls">
			                <input type="text" id="TITLE" name="TITLE" onchange="$(this).validata('length',null,1,50)"/>
			            	<span style="display:none;" class="help-block">请输入1~50个字符</span>
			            </div>
			        </div>
			        <div class="control-group">
			            <label class="control-label">类目</label>
			            <div class="controls">
			                <select id="P_CLASS" name="P_CLASS" style="width:82%;">
			                    <option value="1">中餐</option>
			                    <option value="2">西餐</option>
			                    <option value="3">蛋糕甜品</option>
			                    <option value="4">自助餐</option>
			                    <option value="5">火锅</option>
			                    <option value="6">酒店</option>
			                    <option value="7">旅游</option>
			                    <option value="8">电影票</option>
			                    <option value="9">教育培训</option>
			                    <option value="10">体检保健</option>
			                    <option value="11">美容SPA</option>
			                    <option value="12">美发</option>
			                </select>
			            </div>
			        </div>
			        <div class="control-group">
			            <label class="control-label">价格<span class="must-flag">*</span></label>
			            <div class="controls">
			                <input type="text" id="PRICE" name="PRICE" onchange="$(this).validata('price')" value="0"/>
			        		<span style="display:none;" class="help-block">请正确输入价格，如：99.99</span>
			            </div>
			        </div>
			        <div class="control-group">
			            <label class="control-label">数量<span class="must-flag">*</span></label>
			            <div class="controls">
			                <input type="text" id="AMOUNT" name="AMOUNT" onchange="$(this).validata('number')" value="0"/>
			        		<span style="display:none;" class="help-block">请正确输入数量</span>
			            </div>
			        </div>
			        <div class="control-group">
			        	<input type="hidden" id="img-DELETE" name="img-DELETE">
			         	<div style="width:100%;overflow:hidden">
			        		<label class="control-label">商品图片</label>
			        		<label class="control-label" style="width:500px;text-align:left;padding-left:20px;"><span style="font-size:11pt;color:#666">请选择2M以内的.jpg|.gif|.png文件,最多上传四张图片。</span></label>
			         	</div>
			            <div class="controls" style="margin-left:100px;">
				          	<div style="overflow:hidden;">
					          	<div id="pictures" style="margin-left:5px;">
					          		<span id="picture-0">
						            	<a id="picture-a-0" href="javascript:void(0);" rel="tooltip" data-original-title="请选择2M以内的.jpg|.gif|.png文件" class="input-file add-pict-btn" style="vertical-align:text-bottom">
								            <div id="picture-preview-0"  class="default-img left" style="width:100px;height:80px;text-align:center;">
										         <img  src="${ctx}/images/add-img.png"  style="vertical-align:center">
								            </div>
									   		<div id="picture-del_btn-0" onclick="delpicture(0);" class="left" style="cursor:pointer;z-index:1000;display:none;margin:-4px 0 0 -8px;">
									   			<img align="absmiddle" title="删除图片" style="width:20px;height:20px;" src="${ctx}/images/close.png">
									   		</div>
									   		<input id="picture-file-0" type="file" name="IMG-0" style="width:100%;height:100%;" onchange="if(picturesPreview(0))previewImage(this,'picture-preview-0',100,80,null)"/>
									   	</a>
								   	</span>
					   			</div>
					  		</div>
			            </div>
			        </div>
			    </form>
			    <div class="row-fluid control-group">
			        <div class="span12 nomargin nopadding">
						<div class="editor-title" style="-moz-box-sizing:border-box">内容详情</div>
			            <textarea id="KE_DESCRIPTION" name="KE_DESCRIPTION" style="width:100%;height:300px;display:none;"></textarea>
			            <div class="controls">
			        		<span style="display:none;" class="help-block">内容详情最多输入8000个字符</span>
			            </div>
			        </div>
			    </div>
			</div>
        </div>
		<%@ include file="/footer_bg.jsp" %>
	</div>
</div>
<script src="${ctx}/js/kindeditor/kindeditor.js"></script>
<script src="${ctx}/js/kindeditor/lang/zh_CN.js"></script>
<script>
// 创建文本编辑器
appUtil.createEditor("KE_DESCRIPTION");
$("#add_form").ajaxForm({
    success:function(result,statusText,xhr,ele){
		if(result.isSuccess){
            $.pnotify({
                title: '消息提示',
                text: '操作成功！',
                type: 'success',
                animation: 'fade',
                hide:false,
                shadow: false
            });
        	if("${param.status}" == "1"){
                window.location.href = "${ctx}/trader/storage_l.jsp";
        	}else if("${param.status}" == "2"){
                window.location.href = "${ctx}/trader/sell_l.jsp";
        	}
        }else{
            $.pnotify({
                title: '消息提示',
                text: '操作失败：'+result.error,
                type: 'error',
                animation: 'fade',
                hide:false,
                shadow: false
            });
        }
    }
});
$(document).ready(function(){
	if("${param.status}" == "1"){
		$("#btn_return").show();
		$("#menu_storage").addClass("active");
	}else if("${param.status}" == "2"){
		$("#btn_return").show();
		$("#menu_sell").addClass("active");
	}else{
		$("#btn_return").hide();
		$("#menu_publish").addClass("active");
	}
    $("a[rel=tooltip]").tooltip({placement:"bottom"});
    fill_data();
});
//数据填充
function fill_data(){
	if("${param.id}"){
        $("#headertext").text("商品编辑");
    	$.post("${ctx}/trader/trader.action.jsp",{action:"getGoods","ID":"${param.id}"},function(data){
            if(data.isSuccess){
                var data = data.data;
                $("#TITLE").val(data.TITLE);
                $("#PRICE").val(data.PRICE);
                $("#AMOUNT").val(data.AMOUNT);
                $("#P_CLASS").val(data.P_CLASS);
                var editorHtml = data["DESCRIPTION"] || "";
                editorHtml = editorHtml.replaceAll("/\\[yx_img_sever\\]/file/","${ctx}");
                editor.html(editorHtml);
    	        var pictStr = data.IMG;
    	        if(pictStr && pictStr.length > 0){
        	        var picture = JSON.parse(pictStr);
        	        for(i=0;i<picture.length;i++){
        	        	var pict = picture[i];
        	        	var imgsrc = pict.src;
        	        	addPicture(pict.id,imgsrc);
        	        }
    	        }
            }
        });
    }else{
        $("#headertext").text("商品发布");
    }
}
//商品发布
function do_publish(ele){
    if(!$("#TITLE").validata("length",null,1,50)
            || !$("#PRICE").validata("price")
            || !$("#AMOUNT").validata("number")){
        return;
    }
    if(editor.text() && editor.text().length > 8000){
        $("#KE_DESCRIPTION").parents(".control-group").addClass("error").find(".help-block").show();
        return;
    }
    var editorHtml = editor.html() || "";
	editorHtml = editorHtml.replace(/<script[^>]*>[\s\S]*?<\/script>/ig, '');
    editorHtml = editorHtml.replaceAll("${ctx}/file/"+"${user.USERNAME}"+"/","/[yx_img_sever]/file/"+"${user.USERNAME}"+"/");
    $("#DESCRIPTION").val(editorHtml);
    $("#add_form").submit();
}
//图片预览
function picturesPreview(id){
    if( $("#picture-file-" + id).validata("blankOrImage")){
        $("#picture-file-" + id).height(0);
        $("#picture-file-" + id).width(0);
        $("#picture-" + id).removeAttr("style");
        $("#picture-a-" + id).removeClass("add-pict-btn");
        $("#picture-del_btn-" + id).show();
        addPictureComponent(++id);
        if($("#pictures span").length > 4){
        	$("#pictures").find("span:last").hide();
        }
        return true;
    }
	return false;
}
//添加图片组件
function addPictureComponent(id){
	var html  = '<span id="picture-' + id + '" \>';
	    html += '<a id="picture-a-' + id + '" href="javascript:void(0);" rel="tooltip" data-original-title="请选择2M以内的.jpg|.gif|.png文件" class="input-file add-pict-btn"  style="vertical-align:text-bottom">';
	    html += ' <div id="picture-preview-' + id + '"  class="default-img left" style="width:100px;height:80px;">';
	    html += '  <img  src="${ctx}/images/add-img.png">';
	    html += ' </div>';
	    html += '<div id="picture-del_btn-' + id + '" onclick="delpicture(\'' + id + '\');" class="left" style="cursor:pointer;z-index:1000;display:none;margin:-4px 0 0 -8px;">';
	    html += '  <img align="absmiddle" title="删除图片" style="width:20px;height:20px;" src="${ctx}/images/close.png">';
	    html += '</div>';
	    html += '<input id="picture-file-' + id + '" type="file" style="width:100%;height:100%;"  name="IMG-' + id + '" onchange="if(picturesPreview(\'' + id + '\'))previewImage(this,\'picture-preview-' + id + '\',100,80,null)"/>';
	    html += '</a>';
	    html += '</span>';
	$('#pictures').append(html);
}
//添加图片
function addPicture(id,src){
	var html  = '<span id="picture-' + id + '" ">';
		html += ' <div id="picture-preview-' + id + '"  class="default-img left" style="width:100px;height:80px;">';
		html += '  <img  src="${ctx}' + src + '.s.jpg">';
		html += ' </div>';
		html += '<div id="picture-del_btn-' + id + '" onclick="deloldPicture(\'' + id + '\');" class="left" style="cursor:pointer;z-index:1000;margin:-4px 0 0 -8px;">';
		html += '  <img align="absmiddle" title="删除图片" style="width:20px;height:20px;" src="${ctx}/images/close.png">';
		html += '</div>';
		html += '</span>';
	$('#picture-0').before(html);
    if($("#pictures span").length > 4){
    	$("#pictures").find("span:last").hide();
    }
}

function delpicture(id){
	$('#picture-'+id).remove();
    if($("#pictures span").length < 5){
    	$("#pictures").find("span:last").show();
    }
}
//删除相册中旧的相片
function deloldPicture(id){
	$('#picture-'+id).remove();
    if($("#pictures span").length < 5){
    	$("#pictures").find("span:last").show();
    }
	var deletePicts = $('#img-DELETE').val();
	if(deletePicts.length > 0){
		deletePicts = deletePicts + "," + id;
	}else{
		deletePicts = id;
	}
	$('#img-DELETE').val(deletePicts);
}
</script>
</body>
</html>